<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tool</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            * {
                box-sizing: border-box;
            }

            body {
                margin: 0;
            }

            /* 头部样式 */
            /*.header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
            }*/
            /*导航条*/
            .topnav {
                overflow: hidden;
                background-color: #333;
            }

            /*导航链接*/
            .topnav a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: 14px 16px;
                text-decoration: none;
                padding: 14px;
            }

            /*链接颜色*/
            .topnav a:hover {
                background-color: #ddd;
                color: black;
            }
            
            /* 创建三个相等的列 */
            .column1 {
              float: left;
              width: 20%;
              background-color: darkgray;
              height: 600px;
            }
            .column2 {
              float: left;
              width: 60%;
              background-color: darkkhaki;
              height: 600px;
            }
            .column3 {
              float: left;
              width: 20%;
              background-color:goldenrod;
              height: 600px;
            }

            /* 列后清除浮动 */
            .row:after {
              content: "";
              display: table;
              clear: both;
            }

            #list_button {
                width: 100%;
            }



        </style>
    </head>

    <body>
        <!--
        <div class="header">
            <h1>头部</h1>
        </div>
        -->

        <div class="topnav">
            <a href="#">素材预览</a>
            <a href="#">其他</a>
        </div>

        <div class="row">
            <div class="column1">
                <button id="list_button" onclick="GetJsonFromServer()">获取列表</button>
            </div>
            <div class="column2" id="box">
                <h2>第一列</h2>
            </div>
            <div class="column3">
                <h2>第一列</h2>
            </div>
        </div>


        <script>
            var HttpClient = function() {
                this.get = function(aUrl, aCallback) {
                    var anHttpRequest = new XMLHttpRequest();
                    anHttpRequest.open("GET", aUrl, true);
                    anHttpRequest.send(null);
                    anHttpRequest.onreadystatechange = function() {
                        if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) {
                            aCallback(anHttpRequest.responseText)
                        }
                    }
                }
                this.post = function(aUrl, sendData, aCallback) {
                    var anHttpRequest = new XMLHttpRequest();
                    anHttpRequest.open("POST", aUrl, true);
                    anHttpRequest.send(sendData);
                    anHttpRequest.onreadystatechange = function() {
                        if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) {
                            aCallback(anHttpRequest.responseText)
                        }
                    }
                }
            }

            function GetJsonFromServer() {
                var client = new HttpClient();
                client.get("json/titlelist.json", function(response) {
                    var obj = JSON.parse(response);
                    //var box = document.getElementById("box");
                    //box.innerHTML = "<h2>第一列</h2>";
                    //box.innerHTML = "<h2>第一列</h2>";
                    //box.innerHTML = "<h2>第一列</h2>";
                    var divobj = document.getElementById("box");
                    var li = document.createElement("button");
                    li.innerHTML = "asdfdf";
                    li.onclick = function() { GetJsonFromServer() };
                    divobj.appendChild(li);
                    console.log(obj)
                })
            }
        </script>

    </body>
</html>